<template>
  <div class="universal-layout">
    <!-- 固定侧边栏 - 仅管理员显示 -->
    <div 
      v-if="isAdmin"
      class="universal-sidebar" 
      :class="{ 'collapsed': !sidebarVisible }"
    >
      <div class="sidebar-content">
        <!-- Logo区域 -->
        <div class="logo-section" :class="{ 'collapsed': !sidebarVisible }">
          <div class="logo-icon">
            <el-icon size="24" color="#1e293b">
              <House />
            </el-icon>
          </div>
          <div class="logo-text" v-show="sidebarVisible">
            <h3>美食配送系统</h3>
          </div>
        </div>

        <!-- 简约导航菜单 -->
        <div class="simple-menu">
          <!-- 遍历所有菜单项 -->
          <div v-for="item in menuItems" :key="item.path">
            <!-- 没有子菜单的项目 -->
            <el-tooltip 
              v-if="!item.children || item.children.length === 0"
              :content="item.title"
              placement="right"
              :disabled="sidebarVisible"
              :show-after="300"
            >
              <div 
                class="menu-item"
                :class="{ 'active': activeMenuIndex === item.path, 'collapsed': !sidebarVisible }"
                @click="navigateTo(item.path)"
              >
                <el-icon class="menu-icon">
                  <component :is="item.icon" />
                </el-icon>
                <span class="menu-title" v-show="sidebarVisible">{{ item.title }}</span>
              </div>
            </el-tooltip>
            
            <!-- 有子菜单的项目 -->
            <div v-else class="menu-group">
              <el-tooltip 
                :content="item.title"
                placement="right"
                :disabled="sidebarVisible"
                :show-after="300"
              >
                <div 
                  class="menu-item parent-item"
                  :class="{ 'expanded': expandedMenus.includes(item.path), 'collapsed': !sidebarVisible }"
                  @click="toggleMenu(item.path)"
                >
                  <el-icon class="menu-icon">
                    <component :is="item.icon" />
                  </el-icon>
                  <span class="menu-title" v-show="sidebarVisible">{{ item.title }}</span>
                  <el-icon class="expand-icon" :class="{ 'rotated': expandedMenus.includes(item.path) }" v-show="sidebarVisible">
                    <ArrowRight />
                  </el-icon>
                </div>
              </el-tooltip>
              
              <!-- 子菜单 -->
              <div 
                class="submenu"
                :class="{ 'show': expandedMenus.includes(item.path) && sidebarVisible }"
                v-show="sidebarVisible"
              >
                <div 
                  v-for="child in item.children" 
                  :key="child.path"
                  class="submenu-item"
                  :class="{ 'active': activeMenuIndex === child.path }"
                  @click="navigateTo(child.path)"
                >
                  <el-icon class="submenu-icon">
                    <component :is="child.icon" />
                  </el-icon>
                  <span class="submenu-title">{{ child.title }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 用户信息区域 -->
        <div class="user-info" v-show="sidebarVisible">
          <div class="user-card">
            <el-avatar :size="36" :src="ImageUtils.getImageUrl(currentUser?.userAvatar)" class="user-avatar">
              {{ currentUser?.userName?.charAt(0) || 'U' }}
            </el-avatar>
            <div class="user-details">
              <span class="username">{{ currentUser?.userName || '用户' }}</span>
              <span class="user-role">{{ isAdmin ? '管理员' : '普通用户' }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="universal-main" :class="{ 'sidebar-collapsed': !sidebarVisible && isAdmin, 'user-layout': !isAdmin }">
      <!-- 顶部导航栏 -->
      <div class="universal-header" :class="{ 'user-header': !isAdmin }">
        <div class="header-left">
          <!-- 侧边栏切换按钮 - 仅管理员显示 -->
          <el-button
            v-if="isAdmin"
            type="text"
            @click="toggleSidebar"
            class="sidebar-toggle"
            size="large"
          >
            <el-icon size="20">
              <Menu />
            </el-icon>
          </el-button>
          
          <!-- 普通用户的Logo -->
          <div v-if="!isAdmin" class="user-logo">
            <el-icon size="24" color="#1e293b">
              <House />
            </el-icon>
            <h3>美食配送系统</h3>
          </div>
          
          <!-- 普通用户的水平导航菜单 -->
          <div v-if="!isAdmin" class="horizontal-menu">
            <div v-for="item in menuItems" :key="item.path" class="horizontal-menu-item">
              <!-- 没有子菜单的项目 -->
              <div 
                v-if="!item.children || item.children.length === 0"
                class="nav-item"
                :class="{ 'active': activeMenuIndex === item.path }"
                @click="navigateTo(item.path)"
              >
                <el-icon class="nav-icon">
                  <component :is="item.icon" />
                </el-icon>
                <span class="nav-title">{{ item.title }}</span>
              </div>
              
              <!-- 有子菜单的项目 -->
              <el-dropdown 
                v-else
                @command="navigateTo"
                trigger="hover"
                class="nav-dropdown"
              >
                <div 
                  class="nav-item dropdown-trigger"
                  :class="{ 'active': isActiveParent(item) }"
                >
                  <el-icon class="nav-icon">
                    <component :is="item.icon" />
                  </el-icon>
                  <span class="nav-title">{{ item.title }}</span>
                  <el-icon class="dropdown-arrow">
                    <ArrowRight />
                  </el-icon>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item 
                      v-for="child in item.children" 
                      :key="child.path"
                      :command="child.path"
                      :class="{ 'active': activeMenuIndex === child.path }"
                    >
                      <el-icon>
                        <component :is="child.icon" />
                      </el-icon>
                      {{ child.title }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
          
          <!-- 管理员的面包屑导航 -->
          <el-breadcrumb v-if="isAdmin" separator="/" class="breadcrumb">
            <el-breadcrumb-item>
              <el-icon><House /></el-icon>
              <span>美食配送系统</span>
            </el-breadcrumb-item>
            <el-breadcrumb-item v-for="item in breadcrumbItems" :key="item.path">
              <router-link v-if="item.path && item.path !== $route.path" :to="item.path">
                {{ item.title }}
              </router-link>
              <span v-else>{{ item.title }}</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <div class="header-right">
          <!-- 快速操作按钮 -->
          <div class="quick-actions">
            <el-tooltip content="刷新页面" placement="bottom">
              <el-button type="text" @click="refreshPage" class="action-btn">
                <el-icon size="18"><Refresh /></el-icon>
              </el-button>
            </el-tooltip>
            
            <el-tooltip content="全屏" placement="bottom">
              <el-button type="text" @click="toggleFullscreen" class="action-btn">
                <el-icon size="18"><FullScreen /></el-icon>
              </el-button>
            </el-tooltip>
          </div>

          <!-- 用户头像下拉菜单 -->
          <el-dropdown @command="handleUserCommand" class="user-dropdown">
            <div class="user-avatar-container">
              <el-avatar 
                :size="36" 
                :src="ImageUtils.getImageUrl(currentUser?.userAvatar)" 
                class="header-user-avatar"
              >
                <el-icon><User /></el-icon>
              </el-avatar>
              <span class="user-name">{{ currentUser?.userName || '用户' }}</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">
                  <el-icon><User /></el-icon>
                  个人中心
                </el-dropdown-item>
                <el-dropdown-item command="editProfile">
                  <el-icon><EditPen /></el-icon>
                  编辑资料
                </el-dropdown-item>
                <el-dropdown-item divided command="logout">
                  <el-icon><SwitchButton /></el-icon>
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="universal-content">
        <router-view />
      </div>
    </div>

    <!-- 遮罩层（移动端） -->
    <div 
      v-if="sidebarVisible && isMobile" 
      class="sidebar-overlay" 
      @click="sidebarVisible = false"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Menu, 
  House,
  Tools,
  User,
  SwitchButton,
  Setting,
  UserFilled,
  DataAnalysis,
  MoreFilled,
  Refresh,
  FullScreen,
  Lock,
  EditPen,
  ArrowRight
} from '@element-plus/icons-vue'
import { ImageUtils } from '../utils/imageUtils'

// 路由和store
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

// 响应式数据
const sidebarVisible = ref(true)
const isMobile = ref(false)
const expandedMenus = ref<string[]>([])

// 计算属性
const currentUser = computed(() => userStore.currentUser)
const activeMenuIndex = computed(() => route.path)
const isAdmin = computed(() => {
  return (currentUser.value as any)?.userRole === 'admin'
})

// 菜单项类型定义
interface MenuItem {
  path: string
  title: string
  icon: any
  showInDrawer?: boolean
  children?: MenuItem[]
}

// 用户菜单配置 - 顶部水平导航
const userMenuItems: MenuItem[] = [
  {
    path: '/dashboard',
    title: '首页',
    icon: House,
    showInDrawer: true
  },
  {
    path: '/test',
    title: '测试二级菜单',
    icon: Tools,
    showInDrawer: true,
    children: [
      {
        path: '/test/list',
        title: '测试列表',
        icon: MoreFilled
      },
      {
        path: '/test/favorites',
        title: '测试收藏',
        icon: UserFilled
      }
    ]
  },
]

// 管理员菜单配置 - 支持二级菜单
const adminMenuItems: MenuItem[] = [
  {
    path: '/admin/dashboard',
    title: '数据概览',
    icon: DataAnalysis,
    showInDrawer: true
  },
  {
    path: '/admin/users',
    title: '用户管理',
    icon: UserFilled,
    showInDrawer: true
  },
]

// 所有菜单项 (根据权限显示，过滤掉不需要在抽屉中显示的项目)
const menuItems = computed(() => {
  const items = userMenuItems.filter(item => item.showInDrawer !== false)
  if (isAdmin.value) {
    items.push(...adminMenuItems.filter(item => item.showInDrawer !== false))
  }
  return items
})

// 面包屑导航
const breadcrumbItems = computed(() => {
  const matched = route.matched.filter(item => item.meta?.title)
  const breadcrumbs = []
  
  // 添加当前路由层级
  for (const match of matched) {
    if (match.meta?.title && match.meta.title !== '管理仪表板') {
      breadcrumbs.push({
        title: match.meta.title,
        path: match.path === route.path ? '' : match.path
      })
    }
  }
  
  return breadcrumbs
})

// 方法
const toggleSidebar = () => {
  sidebarVisible.value = !sidebarVisible.value
}

const toggleMenu = (path: string) => {
  const index = expandedMenus.value.indexOf(path)
  if (index > -1) {
    expandedMenus.value.splice(index, 1)
  } else {
    expandedMenus.value.push(path)
  }
}

const navigateTo = (path: string) => {
  router.push(path)
  if (isMobile.value) {
    sidebarVisible.value = false
  }
}

// 检查是否是活跃的父级菜单
const isActiveParent = (item: MenuItem) => {
  if (!item.children) return false
  return item.children.some(child => route.path.startsWith(child.path) || route.path === child.path)
}

const handleUserMenuCommand = async (command: string) => {
  switch (command) {
    case 'profile':
      router.push('/profile')
      break
    case 'settings':
      ElMessage.info('系统设置功能开发中...')
      break

    case 'logout':
      try {
        await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        await userStore.logout()
        router.push('/login')
      } catch {
        // 用户取消
      }
      break
  }
}



// 处理用户下拉菜单命令
const handleUserCommand = (command: string) => {
  switch (command) {
    case 'profile':
      router.push('/profile')
      break
    case 'editProfile':
      router.push('/profile/edit')
      break
    case 'logout':
      handleLogout()
      break
  }
}

// 处理退出登录
const handleLogout = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要退出登录吗？',
      '确认退出',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    // 调用用户store的登出方法
    await userStore.logout()
    
    // 跳转到登录页
    router.push('/login')
  } catch {
    // 用户取消
  }
}

const refreshPage = () => {
  window.location.reload()
}

const toggleFullscreen = () => {
  if (document.fullscreenElement) {
    document.exitFullscreen()
  } else {
    document.documentElement.requestFullscreen()
  }
}

// 检测屏幕尺寸
const checkMobile = () => {
  const wasMobile = isMobile.value
  isMobile.value = window.innerWidth <= 768
  
  // 只有在切换设备类型时才调整侧边栏状态
  if (wasMobile !== isMobile.value) {
    if (isMobile.value) {
      sidebarVisible.value = false
    } else {
      sidebarVisible.value = true
    }
  }
}

// 生命周期
onMounted(() => {
  checkMobile()
  window.addEventListener('resize', checkMobile)
  
  // 默认在桌面端显示侧边栏
  if (!isMobile.value) {
    sidebarVisible.value = true
  }
})

onUnmounted(() => {
  window.removeEventListener('resize', checkMobile)
})
</script>

<style scoped>
.universal-layout {
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  position: relative;
}

/* 固定侧边栏样式 */
.universal-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 240px; /* 减小默认宽度 */
  height: 100vh;
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  transition: width 0.2s ease-out; /* 只动画宽度，减少卡顿 */
  z-index: 1000;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* 防止内容溢出造成卡顿 */
  will-change: width; /* 优化动画性能 */
}

.universal-sidebar.collapsed {
  width: 64px;
}

.sidebar-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  overflow: hidden;
}

/* Logo区域 */
.logo-section {
  padding: 20px 16px;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  transition: all 0.3s ease;
  min-height: 64px;
  justify-content: flex-start;
}

.logo-section.collapsed {
  justify-content: center;
  padding: 20px 8px;
}

.logo-text {
  transition: opacity 0.15s ease-out;
  will-change: opacity; /* 优化动画性能 */
}

.logo-text h3 {
  color: #1e293b;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* 简约菜单样式 */
.simple-menu {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  margin: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #64748b;
  position: relative;
}

.menu-item.collapsed {
  justify-content: center;
  padding: 12px 8px;
  margin: 2px 4px;
  position: relative;
}

.menu-item.collapsed:hover {
  background: rgba(64, 158, 255, 0.1);
}

.menu-item:hover {
  background: #f8fafc;
  color: #334155;
}

.menu-item.active {
  background: #e0f2fe;
  color: #0369a1;
  font-weight: 500;
}

.menu-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: #0369a1;
  border-radius: 0 2px 2px 0;
}

.menu-icon {
  margin-right: 12px;
  font-size: 16px;
  flex-shrink: 0;
}

.menu-title {
  font-size: 14px;
  flex: 1;
  transition: opacity 0.15s ease-out;
  white-space: nowrap;
  overflow: hidden;
  will-change: opacity; /* 优化动画性能 */
}

.parent-item {
  justify-content: space-between;
}

.expand-icon {
  font-size: 14px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.expand-icon.rotated {
  transform: rotate(90deg);
}

/* 子菜单样式 */
.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.submenu.show {
  max-height: 200px;
}

.submenu-item {
  display: flex;
  align-items: center;
  padding: 10px 16px 10px 40px;
  margin: 1px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #64748b;
  font-size: 13px;
  position: relative;
}

.submenu-item:hover {
  background: #f1f5f9;
  color: #475569;
}

.submenu-item.active {
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 500;
}

.submenu-item.active::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 16px;
  background: #1d4ed8;
  border-radius: 1px;
}

.submenu-icon {
  margin-right: 10px;
  font-size: 14px;
  flex-shrink: 0;
}

.submenu-title {
  flex: 1;
}

/* 用户信息区域 */
.user-info {
  padding: 16px;
  border-top: 1px solid #f3f4f6;
  margin-top: auto;
  transition: opacity 0.15s ease-out;
  will-change: opacity; /* 优化动画性能 */
}

.user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.user-avatar {
  flex-shrink: 0;
  background: #e0f2fe;
  color: #0369a1;
  font-weight: 600;
}

.user-details {
  flex: 1;
  min-width: 0;
}

.username {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  display: block;
  font-size: 12px;
  color: #64748b;
  line-height: 1.2;
  margin-top: 2px;
}







/* 主内容区域 */
.universal-main {
  margin-left: 240px; /* 对应侧边栏宽度调整 */
  transition: margin-left 0.2s ease-out; /* 减少动画时间，使用更简单的缓动 */
  height: 100vh;
  display: flex;
  flex-direction: column;
  will-change: margin-left; /* 优化动画性能 */
}

.universal-main.sidebar-collapsed {
  margin-left: 64px;
}

/* 普通用户布局 - 无侧边栏 */
.universal-main.user-layout {
  margin-left: 0;
}

.universal-header {
  height: 64px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 10;
}

/* 普通用户的顶部导航栏样式 */
.universal-header.user-header {
  height: 80px; /* 稍微增加高度以容纳导航菜单 */
  padding: 0 32px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sidebar-toggle {
  font-size: 18px;
  color: #374151;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s ease-out; /* 简化动画 */
  transform-origin: center;
}

.sidebar-toggle:hover {
  background: #f3f4f6;
  color: #1f2937;
  transform: scale(1.05);
}

.sidebar-toggle:active {
  transform: scale(0.95);
}

.breadcrumb {
  font-size: 14px;
}

:deep(.breadcrumb .el-breadcrumb__item) {
  display: flex;
  align-items: center;
  gap: 4px;
}

:deep(.breadcrumb .el-breadcrumb__item:first-child span) {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #6b7280;
  font-weight: 500;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.quick-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: #6b7280;
  transition: all 0.3s;
}

.action-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

/* 用户头像下拉菜单样式 */
.user-dropdown {
  margin-left: 16px;
}

.user-avatar-container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.user-avatar-container:hover {
  background-color: #f8fafc;
  border-color: #e2e8f0;
}

.header-user-avatar {
  border: 2px solid #e2e8f0;
  transition: all 0.2s ease;
}

.user-avatar-container:hover .header-user-avatar {
  border-color: #0369a1;
}

.user-name {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 下拉菜单项样式 */
:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 14px;
}

:deep(.el-dropdown-menu__item .el-icon) {
  font-size: 16px;
}

:deep(.el-dropdown-menu__item:hover) {
  background-color: #f8fafc;
  color: #0369a1;
}

/* 普通用户Logo样式 */
.user-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: 32px;
}

.user-logo h3 {
  color: #1e293b;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* 水平导航菜单样式 */
.horizontal-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.horizontal-menu-item {
  position: relative;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
}

.nav-item:hover {
  background: #f8fafc;
  color: #334155;
  border-color: #e2e8f0;
}

.nav-item.active {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #0369a1;
}

.nav-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.nav-title {
  flex: 1;
}

.dropdown-trigger {
  position: relative;
}

.dropdown-arrow {
  font-size: 12px;
  margin-left: 4px;
  transition: transform 0.2s ease;
}

.nav-dropdown:hover .dropdown-arrow {
  transform: rotate(90deg);
}

/* 水平导航下拉菜单样式 */
:deep(.nav-dropdown .el-dropdown-menu__item) {
  min-width: 140px;
}

:deep(.nav-dropdown .el-dropdown-menu__item.active) {
  background-color: #e0f2fe;
  color: #0369a1;
}



.universal-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background: transparent;
}

/* 遮罩层 */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .universal-sidebar {
    transform: translateX(-100%);
    z-index: 2000;
    width: 240px !important; /* 移动端也使用较小宽度 */
    transition: transform 0.2s ease-out; /* 优化移动端动画 */
    will-change: transform;
  }
  
  .universal-sidebar:not(.collapsed) {
    transform: translateX(0);
  }
  
  .universal-sidebar.collapsed {
    transform: translateX(-100%); /* 移动端收起时完全隐藏 */
  }
  
  .universal-main {
    margin-left: 0;
  }
  
  .universal-main.sidebar-collapsed {
    margin-left: 0;
  }
  
  .universal-header {
    padding: 0 16px;
  }
  
  .universal-header.user-header {
    height: 64px; /* 移动端恢复正常高度 */
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 16px;
  }
  
  .user-logo {
    margin-right: 0;
    margin-bottom: 8px;
  }
  
  .horizontal-menu {
    width: 100%;
    overflow-x: auto;
    gap: 4px;
  }
  
  .nav-item {
    padding: 8px 12px;
    font-size: 13px;
  }
  
  .breadcrumb {
    display: none;
  }
  
  .quick-actions {
    display: none;
  }
  
  .universal-content {
    padding: 16px;
  }
  
  /* 移动端下的遮罩层显示 */
  .sidebar-overlay {
    display: block;
    transition: opacity 0.2s ease-out;
  }
}

/* 滚动条样式 */
.universal-content::-webkit-scrollbar {
  width: 6px;
}

.universal-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.universal-content::-webkit-scrollbar-track {
  background: transparent;
}
</style>


